<template>
    <view class="real-time-info-container">
        <header-vue :back="true" title="发布社区资讯" :backUrl="'/views/community/release'" bgColor="transparent"></header-vue>
        <scroll-view class="nav-box" scroll-x="true" show-scrollbar="false">
            <view class="nav-item" :class="{ active: activeIndex === item.id }" v-for="item in navList" :key="item.id" @click="handleNavClick(item.id)">
                <view class="nav-item-title">
                    <u-image :src="item.icon" width="44rpx" height="44rpx"></u-image>
                    <text>{{ item.title }}</text>
                </view>
            </view>
        </scroll-view>
        <view class="content-box">
            <view class="cover-img" @click="onChooseCover" v-if="activeIndex == 2 || activeIndex == 4">
                <block v-if="!coverUrl">
                    <view class="cover-placeholder">
                        <u-icon name="plus" color="#bbbbbb" size="48rpx"></u-icon>
                        <text class="cover-tip">添加优质封面</text>
                    </view>
                </block>
                <block v-else>
                    <image class="cover-image" :src="coverUrl" mode="aspectFill" @click.stop="onPreviewCover"></image>
                    <view class="cover-actions" @click.stop>
                        <view class="action-btn" @click.stop="onChooseCover">更换</view>
                        <view class="action-btn danger" @click.stop="onRemoveCover">删除</view>
                    </view>
                </block>
            </view>

            <view class="title-box">
                <input class="title-input" v-model="title" type="text" placeholder="请填写标题">
            </view>
            <view class="content-box-item">
                <view class="content-title">内容</view>
                <view class="content-item">
                    <sp-editor
                        class="editor"
                        :toolbar-config="{
                            excludeKeys:['export','image','video','link','direction'],
                            iconSize: '18px',
                        }"
                        placeholder="请输入内容..."
                        @input="onEditorChange"
                    ></sp-editor>
                </view>
            </view>
        </view>
        <footer-vue>
            <view class="confirm-btn" @click="handlePublish">确认发布</view>
        </footer-vue>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import footerVue from '@/components/fixed-footer/index.vue';
import { postCommunitynewsLifetipPublish, postCommunitynewsTopicCreate, postCommunitynewsNoticePublish, postCommunitynewsPolicyPublish,postUploadNow } from '@/api/index.js'
import { title } from 'process';
export default {
    name: 'real-time-info',
    components: {
        headerVue,
        footerVue
    },
    data() {
        return {
            navList: [
                { title: '生活小贴士', id: 1, icon: '/static/community/icon6.png' },
                { title: '社区话题', id: 2, icon: '/static/community/icon7.png' },
                { title: '社区通知', id: 3, icon: '/static/community/icon8.png' },
                { title: '政策解读', id: 4, icon: '/static/community/icon9.png' },
            ],
            activeIndex: 1,
            title: '',
            contentHtml: '',
            coverUrl: ''
        }
    },
    methods: {
        handleNavClick(id) {
            this.activeIndex = id
        },
        onEditorChange(val) {
            this.contentHtml = val.html
        },
        async onChooseCover() {
            try {
                const res = await uni.chooseImage({
                    count: 1,
                    sizeType: ['compressed'],
                    sourceType: ['album','camera']
                })
                if (res && res.tempFilePaths && res.tempFilePaths.length) {
                    this.coverUrl = res.tempFilePaths[0]
                }
            } catch (e) {}
        },
        onRemoveCover() {
            this.coverUrl = ''
        },
        onPreviewCover() {
            if (!this.coverUrl) return
            uni.previewImage({ current: this.coverUrl, urls: [this.coverUrl] })
        },
        async handlePublish() {
            if (!this.title.trim()) {
                uni.showToast({ title: '请填写标题', icon: 'none' })
                return
            }
            const pureText = this.contentHtml.replace(/<[^>]*>/g, '').trim()
            if (!pureText) {
                uni.showToast({ title: '请填写内容', icon: 'none' })
                return
            }
            // 如需从编辑器取更精确的内容，可优先读取 v-model
            let payload = {
                title: this.title.trim(),
                content: this.contentHtml,
            }
            // 根据 activeIndex 判断调用哪个接口
            let publishPromise = null
            if (this.activeIndex === 1) {
                // 生活小贴士
                publishPromise = postCommunitynewsLifetipPublish(payload)
            } else if (this.activeIndex === 2) {
                uni.showToast({
                    icon:'loading'
                })
                const res = await postUploadNow(this.coverUrl)
                const data = JSON.parse(res.data)
                payload.image_urls = data.url
                // 社区话题
                publishPromise = postCommunitynewsTopicCreate(payload)
            } else if (this.activeIndex === 3) {
                 // 社区通知
                 publishPromise = postCommunitynewsNoticePublish(payload)
            } else {
                uni.showToast({
                    icon:'loading'
                })
                const res = await postUploadNow(this.coverUrl)
                const data = JSON.parse(res.data)
                payload.image_urls = data.url
                 // 政策解读
                 publishPromise = postCommunitynewsPolicyPublish(payload)
            }
            const res = await publishPromise
            if ( res.errno === 0 ){
                uni.showToast({
                    title:"发布成功",
                    icon:'success',
                    success:() => {
                        uni.redirectTo({url:'/pages/main?url=3'})
                    }
                })
            } else {
                uni.showToast({title: res.msg || '发布失败！'})
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.real-time-info-container {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient( 180deg, #e6f0ff 0%, #feffff 100%);
}
.nav-box {
    display: flex;
    height: 90rpx;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    padding: 20rpx 0;
    /* scroll-view 默认有100%宽度，这里可根据需要调整 */
}
.nav-item {
    position: relative;
    display: inline-block;
    width: 200rpx;
    height: 70rpx;
    margin-left: 24rpx;
    background: #fff;
    border-radius: 70rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
    text-align: center;
    line-height: 65rpx;

    &::after {
        content: '';
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-top: 20rpx solid #fff;
        border-left: 40rpx solid transparent;
        border-right: 40rpx solid transparent;
    }

    &.active {
        background: #35B1FF;

        &::after {
            border-top: 20rpx solid #35B1FF;
        }

        .nav-item-title text {
            color: #fff;
        }
    }
}
.nav-item-title {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-item-title text {
    font-size: 28rpx;
    color: #999999;
    font-weight: 500;
    margin-left: 5rpx;
}

.title-box {
    width: 100%;
    height: 94rpx;
    margin-top: 28rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.title-input {
    width: 100%;
    height: 100%;
    padding: 0 30rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.04);
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    font-size: 28rpx;
    color: #333333;
}
.title-input::placeholder {
    font-size: 28rpx;
    color: #999999;
}
.content-box {
    width: 100%;
    padding: 0 32rpx 180rpx;
    margin-top: 28rpx;
    box-sizing: border-box;
}
.cover-img {
    width: 100%;
    height: 300rpx;
    background: #FFFFFF;
    box-shadow: 0 0 16rpx rgba(0,0,0,0.04);
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.cover-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #bbb;
}
.cover-tip {
    margin-top: 12rpx;
    font-size: 26rpx;
    color: #999;
}
.cover-image {
    width: 100%;
    height: 100%;
}
.cover-actions {
    position: absolute;
    right: 16rpx;
    bottom: 16rpx;
    display: flex;
    gap: 12rpx;
}
.action-btn {
    padding: 8rpx 16rpx;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 24rpx;
    font-size: 24rpx;
}
.action-btn.danger {
    background: rgba(252,70,70,0.85);
}
.content-box-item {
    height: 100%;
    margin-top: 28rpx;
    background: #FFF;
    padding: 28rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.04);
    border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.content-title {
    font-size: 28rpx;
    font-weight: bold;
}
.content-item {
    width: 100%;
    height: 100%;
}
.editor {
    width: 100%;
    margin-top: 20rpx;
    height: 1000rpx;

}
.confirm-btn {
    width: 100%;
    height: 76rpx;
    background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    font-weight: 500;
    font-size: 36rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 76rpx;
}
</style>